<template>
	<div id="app">
		<!-- <img src="./assets/logo.png"> -->
		<signupmodal></signupmodal>
		<signinmodal></signinmodal>
		<changepwdmodal></changepwdmodal>
		<addmodal></addmodal>
		<accdetailmodal></accdetailmodal>
		<searchbox></searchbox>
		<alertmodal></alertmodal>
		<div v-if="!didSignIn" class="before-signin">
			<h1 class="jumbtron">Oh My Money!</h1>
			<div class="intro">
				<p>登陆或注册来使用你的账本。</p>
			</div>
			<div class="btn-group">
				<button v-on:click="signIn" class="btn blue">登录</button>
				<button v-on:click="signUp" class="btn red">注册</button>
			</div>
		</div>
		<div v-if="didSignIn" class="after-signin">
			<!-- insert some code here. -->
			<userpanel></userpanel>
			<div class="text-center">
				<button v-on:click="addIncome" class="btn blue">记录收入</button>
				<button v-on:click="addExpenditure" class="btn red">记录支出</button>
			</div>
			<div class="text-center">
				<accountbar v-for="acid in accountIDs" v-bind:accountid="acid" v-bind:key="acid"></accountbar>
			</div>
		</div>
	</div>
</template>

<script>
import {bus} from './main.js'
import SignInModal from './components/SignInModal'
import SignUpModal from './components/SignUpModal'
import UserPanel from './components/UserPanel'
import AccountBar from './components/AccountBar'
import AddAccountModal from './components/AddAccountModal'
import AccountDetailModal from './components/AccountDetailModal'
import AlertModal from './components/AlertModal'
import ChangePwdModal from './components/ChangePwdModal'
import SearchBox from './components/SearchBox'

export default {
	name: 'app',
	components: {
		signinmodal: SignInModal,
		signupmodal: SignUpModal,
		userpanel: UserPanel,
		accountbar: AccountBar,
		accdetailmodal: AccountDetailModal,
		addmodal: AddAccountModal,
		alertmodal: AlertModal,
		changepwdmodal: ChangePwdModal,
		searchbox: SearchBox
	},
	data() {
		return {
			didSignIn: false,
			accountIDs: [],
			username: ''
		}
	},
	methods: {
		addIncome: function(){
			bus.$emit('show_add_modal', true)
		},
		addExpenditure: function(){
			bus.$emit('show_add_modal', false)
		},
		signIn: function(){
			bus.$emit('show_signin_modal')
		},
		signUp: function(){
			bus.$emit('show_signup_modal')
		}
	},
	mounted: function(){
		bus.$on('signin_success', function(){
			this.accountIDs = window.delegate.getAccountIDList().slice(0)
			this.accountIDs.reverse()
			this.username = window.delegate.currentUser.username
			this.didSignIn = true
		}.bind(this))

		bus.$on('sign_out', function(){
			window.delegate.logoutUser()
			this.didSignIn = false
		}.bind(this))

		bus.$on('did_add_account', function(accountID){
			this.accountIDs.unshift(accountID)
		}.bind(this))
	}
}
</script>

<style>
body{
	background-image: url('./assets/background.png');
}

#app {
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	width: 100%;
	height: 100%;
	padding-top: 30px;
}

.text-center{
	text-align: center;
}

.intro{
	width: 70%;
	margin-left: 15%;
	margin-right: 15%;
}

.jumbtron{
	font-size: 60px;
}

.intro p{
	font-size: 30px;
}

.before-signin{
	height: 100%;
}

.intro{
	background-color: rgba(255, 255, 255, 0.5);
}

.btn{
	border-radius: 7px;
	height: 40px;
	width: 200px;
	opacity: 0.95;
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 5px;
	margin-bottom: 5px;
	color: black;
	font-size: 16px;
	cursor: pointer;
	background-color: white;
}

.blue{
	border: 2px solid darkblue;
}

.red{
	border: 2px solid darkred;
}

.hachang{
	margin-left:15%;
	margin-right:15%;
	width: 70%;
}

.hero{
	font-family: Arial;
	font-size: 35px;
	color: black;
}

html, body{
	height: 100%;
	width: 100%;
}

</style>